import React from "react";
import { Color } from "../model/color";
interface Props {
    color: Color,
    onColorUpdated: (color: Color) => void;
}

const updatedColor = (props: Props, colorId: keyof Color) =>
    (value: any) => {
        props.onColorUpdated({
            ...props.color,
            [colorId]: value
        })
    }
// ts是js的超集

const ColorPicker: React.FC<Props> = (props) => {
    // updatedColor("red")
    return (
        <>
            <div>
                <ColorSliderComponent 
                    value={props.color.red}
                    onValueUpdated={updatedColor(props,"red")}
                />
                <br />
                <ColorSliderComponent 
                    value={props.color.green}
                    onValueUpdated={updatedColor(props,"green")}
                />
                <br />
                 <ColorSliderComponent 
                    value={props.color.blue}
                    onValueUpdated={updatedColor(props,"blue")}
                />
            </div>
        </>
    )
}

interface PropsColorSlider {
    value:number;
    onValueUpdated:(newValue:number)=>void;
}

const ColorSliderComponent: React.FC<PropsColorSlider>=(props)=>{
    return(
        <div>
            <input 
                type="range"
                min="0"
                max="255"
                value={props.value}
                onChange={(event)=>props.onValueUpdated(+event.target.value)}
            />
            {props.value}
        </div>
    )
}

export default ColorPicker